<template>
  <div>
    <x-header :title="title"></x-header>
    <group label-width="12em" label-margin-right="1.5em" label-align="left" gutter="0">
      <popup-picker title="考试批次" popup-title="考试批次" :data="batchList" v-model="batch" :columns="1" show-name value-text-align="left">
        <img class="icon" slot="title" src="../assets/img/icon_batch.png">
      </popup-picker>
      <x-input title="" placeholder="请输入学生姓名" v-model="scoreInfo.studentName" required>
        <img class="icon" slot="label" src="../assets/img/icon_user.png">
      </x-input>
      <popup-picker title="证件类型" popup-title="证件类型" :data="idTypeList" v-model="type" :columns="1" show-name value-text-align="left" @on-change="changeIdType">
        <img class="icon" slot="title" src="../assets/img/icon_type.png">
      </popup-picker>
      <x-input title="" placeholder="请输入证件号码" v-model="scoreInfo.idNo" ref="idNo" :min="numMix" :max="numMax" required :isType="beIdCardNum" @on-change="changeIdNo">
        <img class="icon" slot="label" src="../assets/img/icon_id_card.png">
      </x-input>
      <popup-picker title="科目" placeholder="请选择考试科目" :data="subjectList" v-model="subject" :columns="1" show-name value-text-align="left">
        <img class="icon" slot="title" src="../assets/img/icon_subject.png">
      </popup-picker>
    </group>
    <flexbox class="search-button">
      <flexbox-item :span="1"></flexbox-item>
      <flexbox-item :span="10">
        <x-button type="primary" @click.native="getExamResult" :disabled="isDisabled">查询</x-button>
      </flexbox-item>
      <flexbox-item :span="1"></flexbox-item>
    </flexbox>
    <div class="exam-result" v-for="item in examList" :key="item.index">
      <img class="examImg" src="../assets/img/banner_login.jpg" />
      <span>考试结果：</span>
      <span style="color:#4b165e;font-size:26px;">{{ item.isPass === '1' ? "通过" : "降级" }}</span><br>
      <span>学生姓名：</span><span class="score-content">{{ item.studentName }}</span><br>
      <span>考试科目：</span><span class="score-content">{{ item.subjectName}}</span><br>
      <span>考试级别：</span><span class="score-content">{{ item.leavelName }}</span><br>
      <span>考试日期：</span><span class="score-content">{{ item.examDay }}</span><br>
      <span>考试地点：</span><span class="score-content">{{ item.examAddress }}</span><br>
      <span>考后级别: </span><span class="score-content">{{ item.resultName }}</span><br>
    </div>
  </div>
</template>
<script>
import {
  XHeader,
  Group,
  XInput,
  XButton,
  PopupPicker,
  Datetime,
  CellBox,
  Popup,
  Flexbox,
  FlexboxItem
} from "vux";
export default {
  components: {
    XHeader,
    Group,
    XInput,
    XButton,
    PopupPicker,
    Datetime,
    CellBox,
    Popup,
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      title: "考试成绩查询",
      batchList: [],
      batch: [],
      idTypeList: [],
      type:[],
      numMix: 18,
      numMax: 18,
      beIdCardNum: function(value) {
        var pattern = new RegExp(
          /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
        );
        var isValid = pattern.exec(value);
        return {
          valid: isValid,
          msg: "请输入正确的身份证号"
        };
      },
      subjectList: [],
      subject: [],
      scoreInfo: {
        batchId: "",
        studentName: "",
        idType: "",
        idNo: "",
        subjectId: ""
      },
      isIdNoValid: false,
      examList: []
    };
  },
  computed: {
    isDisabled: function() {
      return !this.scoreInfo.studentName || !this.isIdNoValid;
    }
  },
  created: function() {
    const vm = this;
    vm.getDtBatchList();
    vm.getIdTypeList();
    vm.getSubjectList();
    vm.$bridge.registerhandler("jsCloseWebPage", (data, responseCallback) => {
      history.back();
      responseCallback("0");
    });
  },
  methods: {
    changeIdType: function(value) {
      const vm = this;
      vm.$refs.idNo.reset();
      if (value == 1) {
        (vm.numMix = 9),
          (vm.numMax = 9),
          (vm.beIdCardNum = function(value) {
            var pattern = new RegExp(/^G\d{8}|E\d{8}|E[A-Z]\d{7}$/);
            var isValid = pattern.exec(value);
            return {
              valid: isValid,
              msg: "请输入正确的护照号"
            };
          });
      } else {
        (vm.numMix = 18),
          (vm.numMax = 18),
          (vm.beIdCardNum = function(value) {
            var pattern = new RegExp(
              /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
            );
            var isValid = pattern.exec(value);
            return {
              valid: isValid,
              msg: "请输入正确的身份证号"
            };
          });
      }
    },
    getDtBatchList: function() {
      const vm = this;
      this.$api
        .getDtBatchList()
        .then(response => {
          vm.batchList = response;
          vm.batch = [response[0].value];
        })
        .catch(err => {
          console.log("查询考试批次列表出错了" + err);
        });
    },
    getIdTypeList: function() {
      const vm = this;
      this.$api
        .getEnum2(5)
        .then(response => {
          vm.idTypeList = response;
          vm.type = [response[0].value];
        })
        .catch(err => {
          console.log("查询证件类型出错了" + err);
        });
    },
    getSubjectList: function() {
      const vm = this;
      this.$api
        .getSubject()
        .then(response => {
          vm.subjectList = response;
          vm.subjectList.unshift({ name: "全部科目", value: "" });
        })
        .catch(err => {
          console.log("查询科目列表出错了" + err);
        });
    },
    changeIdNo: function() {
      const vm = this;
      vm.isIdNoValid = vm.$refs.idNo.valid;
    },
    getExamResult: function() {
      const vm = this;
      vm.scoreInfo.batchId = vm.batch[0];
      vm.scoreInfo.idType = vm.type[0];
      vm.scoreInfo.subjectId = vm.subject[0];
      this.$api
        .getExamResult(vm.scoreInfo)
        .then(response => {
          vm.examList = response;
          if (vm.examList.length == 0) {
            vm.$vux.alert.show({
              content: "没有可以查询的成绩！"
            });
          }
        })
        .catch(err => {
          console.log("查询考试成绩出错了" + err);
        });
    }
  }
};
</script>
<style>
.vux-cell-value {
  color: #000 !important;
}
.icon {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 50%;
}
.search-button {
  margin-top: 15px;
  margin-bottom: 15px;
}
.exam-result {
  width: 95%;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 20px;
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #999;
  border-radius: 5px;
}
.examImg {
  width: 100%;
}
.score-content {
  color: #666;
}
</style>
